<template>
  <el-table
    :data="table.data"
    style="width: 100%"
    :height="height"
    :span-method="objectSpanMethod"
  >
    <el-table-column label="事故形态" width="150">
      <el-table-column class-name="invisible-col" prop="sgcllx" width="150" />
      <el-table-column class-name="invisible-col" prop="sgxtmc" width="150" />
    </el-table-column>
    <el-table-column prop="sgCount" label="事故起数" />
    <el-table-column prop="sgCountYOY" label="增减百分比" />
    <el-table-column prop="sgCountRatio" label="占总数" />
    <el-table-column prop="swrsCount" label="死亡人数" />
    <el-table-column prop="swrsCountYOY" label="增减百分比" />
    <el-table-column prop="swrsCountRatio" label="占总数" />
    <el-table-column prop="ssrsCount" label="受伤人数" />
    <el-table-column prop="ssrsCountYOY" label="增减百分比" />
    <el-table-column prop="ssrsCountRatio" label="占总数" />
  </el-table>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  data: {
    type: Array,
  },
  height: {
    type: Number,
  },
  type: {
    type: String,
  },
  name: {
    type: String,
  },
});

const table = computed(() => {
  const data = [];
  const groups = {};
  for (let i = 0; i < props.data.length; i++) {
    const item = props.data[i];
    if (props.name && props.type === "Form" && item.sgcllx !== props.name) {
      continue; // 跳过不符合条件的项
    }
    for (let j = 0; j < item.dataList.length; j++) {
      data.push({
        sgcllx: item.sgcllx,
        ...item.dataList[j],
        length: item.dataList.length,
      });
    }
  }

  for (let i = 0; i < data.length; i++) {
    const group = groups[data[i].sgcllx];
    if (!group) {
      groups[data[i].sgcllx] = {
        rowIndex: i,
        num: data[i].length || 0,
      };
    }
  }

  return {
    data,
    groups,
  };
});

const objectSpanMethod = ({ row, rowIndex, columnIndex }) => {
  const group = table.value.groups[row.sgcllx];
  if ([0].includes(columnIndex)) {
    if (rowIndex === group.rowIndex) {
      return {
        rowspan: group.num,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
</script>

<style lang="less" scoped></style>
